 <template>
<div class="card rdsp-card-view" data-page="maintainceStatistics">
	<div class="statistics-card-list">
		<ul id="statisticsList">
		</ul>
	</div>
</div>
</template>
<style scoped>
	.item-bar-title{
		float: left;
		margin-right: 10px;
	}
</style>
<script>
	return {
		data : function() {
			return {}
		},
		methods : {
			getMaintainListForApp : function() {
				var self = this;
				Dao.getMaintainListForApp({
					orgId:single_Orgid_wbdw
				}, function(data) {
					$("#statisticsList").empty();
					let percentage = "100%";
                    let percentageRealNum = 0;
					if (data && data.length > 0) {
						for (var i = 0; i < data.length; i++) {
							var total1 = data[i].notStartDis + data[i].notStartNotDis;
							let percentageNum1 = 0;
							if(total1 != 0){
								percentageNum1 = (((data[i].notStartDis)/total1).toFixed(2)*100);
								percentageNum1 = Math.round(percentageNum1);
							}
							let percentageRealNum1 = percentageNum1-100;
			                let percentage1 = percentageNum1.toString()+"%";
			                
			                var total2 = data[i].startFin + data[i].startNotFin;
							let percentageNum2 = 0;
							if(total2 != 0){
								percentageNum2 = (((data[i].startFin)/total2).toFixed(2)*100);
								percentageNum2 = Math.round(percentageNum2);
							}
							let percentageRealNum2 = percentageNum2-100;
			                let percentage2 = percentageNum2.toString()+"%";
							if (data[i].type == 1) { //巡查
								$("#statisticsList").append(`
										<li>
								        <a href="#" class="showItem" data-type="1" data-flag="1">
										<div class="item-left card-patrol">
											<span>维保巡查</span>
											<div class="item-iconfont">
												<i class="iconfont icon-APP-1" style="font-size: 70px;"></i>
											</div>
										</div>
										</a>
										<div class="item-right">
										    <a href="#" class="showItem" data-type="1" data-flag="0">
											<div class="task-card-item">
												<div class="item-bar">
													<div class="item-bar-title">未开始</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum1+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage1+`</div>
												</div>
												<div class="item-content">
													<span>已指定<span style="margin-left:8px;">`+data[i].notStartDis+`</span></span> 
													<span style="margin-left:20px;">未指定<span style="margin-left:8px;">`+data[i].notStartNotDis+`</span></span>
												</div>
											</div>
											</a>
											<a href="#" class="showItem" data-type="1" data-flag="1">
											<div class="task-card-item" style="margin-top: 5px;">
												<div class="item-bar">
													<div class="item-bar-title">进行中</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum2+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage2+`</div>
												</div>
												<div class="item-content">
									     			<span>提前完成<span style="margin-left:8px;">`+data[i].startFin+`</span></span>
										    		<span style="margin-left:20px;">待完成<span style="margin-left:8px;">`+data[i].startNotFin+`</span></span>
												</div>
											</div>
											</a>
										</div>
									</li>	
										`);
							} else if (data[i].type == 2) { //保养
								$("#statisticsList").append(`
										<li>
										<a href="#" class="showItem" data-type="2" data-flag="2">
										<div class="item-left card-maintenancel">
									    	<span>保养</span>
										    <div class="item-iconfont">
										    	<i class="iconfont icon-APP-" style="font-size: 70px;"></i>
										    </div>
									    </div>
									    </a>
										<div class="item-right">
										<a href="#" class="showItem" data-type="2" data-flag="1">
											<div class="task-card-item">
												<div class="item-bar">
													<div class="item-bar-title">未开始</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum1+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage1+`</div>
												</div>
												<div class="item-content">
													<span>已指定<span style="margin-left:8px;">`+data[i].notStartDis+`</span></span>
													<span style="margin-left:20px;">未指定<span style="margin-left:8px;">`+data[i].notStartNotDis+`</span></span>
												</div>
											</div>
											</a>
											<a href="#" class="showItem" data-type="2" data-flag="2">
											<div class="task-card-item" style="margin-top: 5px;">
												<div class="item-bar">
													<div class="item-bar-title">进行中</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum2+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage2+`</div>
												</div>
												<div class="item-content">
									     			<span>提前完成<span style="margin-left:8px;">`+data[i].startFin+`</span></span>
										    		<span style="margin-left:20px;">待完成<span style="margin-left:8px;">`+data[i].startNotFin+`</span></span>
												</div>
											</div>
											</a>
										</div>
									</li>
										`);
							} else if (data[i].type == 3) { //单点测试
								$("#statisticsList").append(`
										<li>
										<a href="#" class="showItem" data-type="3" data-flag="1">
										<div class="item-left card-singleTest">
										<span>单点测试</span>
										<div class="item-iconfont">
											<i class="iconfont icon-APP-2" style="font-size: 70px;"></i>
									 	</div>
								    	</div>
								    	</a>
										<div class="item-right">
										<a href="#" class="showItem" data-type="3" data-flag="0">
											<div class="task-card-item">
												<div class="item-bar">
													<div class="item-bar-title">未开始</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum1+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage1+`</div>
												</div>
												<div class="item-content">
													<span>已指定<span style="margin-left:8px;">`+data[i].notStartDis+`</span></span>
													<span style="margin-left:20px;">未指定<span style="margin-left:8px;">`+data[i].notStartNotDis+`</span></span>
												</div>
											</div>
											</a>
											<a href="#" class="showItem" data-type="3" data-flag="1">
											<div class="task-card-item" style="margin-top: 5px;">
												<div class="item-bar">
													<div class="item-bar-title">进行中</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum2+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage2+`</div>
												</div>
												<div class="item-content">
									     			<span>提前完成<span style="margin-left:8px;">`+data[i].startFin+`</span></span>
										    		<span style="margin-left:20px;">待完成<span style="margin-left:8px;">`+data[i].startNotFin+`</span></span>
												</div>
											</div>
											</a>
										</div>
									</li>
										`);
							} else if (data[i].type == 4) { // 联动测试
								$("#statisticsList").append(`
										<li>
										<a href="#" class="showItem" data-type="4" data-flag="1">
										<div class="item-left card-linkTest">
									     	<span>联动测试</span>
									     	<div class="item-iconfont">
											<i class="iconfont icon-APP-3" style="font-size: 70px;"></i>
										</div>
									   </div>
									   </a>
										<div class="item-right">
										<a href="#" class="showItem" data-type="4" data-flag="0">
											<div class="task-card-item">
												<div class="item-bar">
													<div class="item-bar-title">未开始</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum1+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage1+`</div>
												</div>
												<div class="item-content">
													<span>已指定<span style="margin-left:8px;">`+data[i].notStartDis+`</span></span>
													<span style="margin-left:20px;">未指定<span style="margin-left:8px;">`+data[i].notStartNotDis+`</span></span>
												</div>
											</div>
											</a>
											<a href="#" class="showItem" data-type="4" data-flag="1">
											<div class="task-card-item" style="margin-top: 5px;">
												<div class="item-bar">
													<div class="item-bar-title">进行中</div>
													<div data-progress="80" class="progressbar progressbar-height">
														<span style="transform: translate3d(`+percentageRealNum2+`%, 0px, 0px);" class=""></span>
													</div>
													<div class="progressbarNum">`+percentage2+`</div>
												</div>
												<div class="item-content">
									     			<span>提前完成<span style="margin-left:8px;">`+data[i].startFin+`</span></span>
										    		<span style="margin-left:20px;">待完成<span style="margin-left:8px;">`+data[i].startNotFin+`</span></span>
												</div>
											</div>
											</a>
										</div>
									</li>
										`);
							} else {

							}
							
							jQuery(".showItem").off().click(function(){
								var type = $(this).attr("data-type");
								var flag = $(this).attr("data-flag");
								if(type == '1') {
									app.router.navigate("/maintainInspect/"+flag+"/"+single_Orgid_wbdw+"/");
								}
								if(type == '2') {
									app.router.navigate("/maintain/"+flag+"/"+single_Orgid_wbdw+"/");
								}
								if(type == '3') {
									app.router.navigate("/singleTest/"+flag+"/"+single_Orgid_wbdw+"/");
								}
								if(type == '4') {
									app.router.navigate("/linkTest/"+flag+"/"+single_Orgid_wbdw+"/");
								}
							});
						}
					} else {

					}
				});
			},
		},
		on : {
			pageAfterIn : function(e, page) {
				var self = this;
				
				self.getMaintainListForApp();
			}
		}
	}
</script>